<template>
<q-page padding class="column flex-center back-grey">
    <div v-if="!isPageLoad && !isAlreadyApply" class="col-grow column flex-center">
        <div class=" column flex-center">

            <q-icon v-if="isForbidden" size="60px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <title>note-remove-outline</title>
                    <path d="M5 19V5H12V12H19V13C19.7 13 20.37 13.13 21 13.35V9L15 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H13.35C13.13 20.37 13 19.7 13 19H5M14 4.5L19.5 10H14V4.5M20.41 19L22.54 21.12L21.12 22.54L19 20.41L16.88 22.54L15.47 21.12L17.59 19L15.47 16.88L16.88 15.47L19 17.59L21.12 15.47L22.54 16.88L20.41 19Z" />
                </svg></q-icon>
            <q-icon v-else size="60px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <title>note-plus-outline</title>
                    <path d="M5 19V5H12V12H19V13C19.7 13 20.37 13.13 21 13.35V9L15 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H13.35C13.13 20.37 13 19.7 13 19H5M14 4.5L19.5 10H14V4.5M23 18V20H20V23H18V20H15V18H18V15H20V18H23Z" />
                </svg></q-icon>
            <span class="text-h6 ellipsis q-my-md">{{projectinfo.name}}</span>
        </div>
        <span v-if="isForbidden" class="text-grey-4 text-body q-mb-lg">
            项目不对外开放,无法加入!
        </span>
        <div v-if="!isForbidden" class="text-grey-4">
            <q-input dark class="text-grey-4" color="blue-6" label-color="grey-4" v-model="reason" placeholder="理由：可备注真实姓名" />
        </div>

        <div class="q-mt-lg">

            <q-btn v-if="isForbidden" color="cyan-6" label="返回首页" @click="handleBackHome" />
            <q-btn v-else color="blue-6" :loading="isLoad" label="申请加入项目" @click="handleApplyPermission" />

        </div>

    </div>
    <div v-if="!isPageLoad && isAlreadyApply" class="col-grow column flex-center">
        <q-icon size="60px" color="light-green-6">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <title>hand-okay</title>
                <path d="M13.3,19.26L18.96,13.61L21.08,15.73L15.42,21.38L13.3,19.26M16.5,11.13L13.4,8.05C13.27,7.92 13.13,7.83 13,7.76L11.88,3.47C11.74,2.93 11.2,2.61 10.66,2.75C10.13,2.88 9.81,3.43 9.94,3.96L11,8.03V8.03L8.67,3.19C8.44,2.69 7.84,2.5 7.34,2.71C6.84,2.95 6.63,3.55 6.87,4.05L8.56,7.59L5.19,4.25C4.8,3.86 4.16,3.86 3.77,4.25C3.38,4.65 3.39,5.28 3.78,5.67L7.5,9.37L6.8,9.64L5.72,10.07L3.81,11.39C3.81,11.39 3,12.44 2.93,12.89C2.85,13.34 3.72,15.6 3.72,15.6H3.73C3.89,15.94 4.23,16.18 4.63,16.18A1,1 0 0,0 5.63,15.18C5.63,15.08 5.6,15 5.57,14.91L5.59,14.9L5,13.17L6.23,12.19C6.7,12.21 7.71,12.29 8.2,12.32C10.93,14.77 8.35,15.73 8.35,15.73L4.89,16.79L4.72,16.93C4.5,17.13 4.41,17.4 4.42,17.68L4.44,18.75L10.87,18.25C11.25,18.26 11.61,18.12 11.89,17.85L16.5,13.25C17.03,12.71 17.05,11.7 16.5,11.13Z" />
            </svg>
        </q-icon>

        <span class="text-white text-h6 q-mt-lg">已发送申请</span>
        <span class="text-grey-4 text-body q-mt-sm">需等待管理员审批，通过后将自动进入项目</span>
    </div>
    <div v-if="isPageLoad" class="col-grow column flex-center">
        <q-spinner-hourglass color="primary" size="15em" />

    </div>

</q-page>
</template>

<script>
import {
    io
} from "socket.io-client";
const socket = io("ws://api.yfyh.cc", {
    reconnectionDelayMax: 10000,
    auth: {
        token: JSON.parse(window.localStorage.getItem("user")).token,
    },
});
import {
    getProjectinfo
} from "assets/api/studio";
import {
    applyPermission,
    checkApply,
    checkMember
} from "assets/api/member";
export default {
    name: 'MemberPage',
    props: {
        user: {
            type: Object
        }
    },

    data() {
        return {
            pid: '',
            projectinfo: '',
            isForbidden: false,
            username: '',
            reason: '',
            isAlreadyApply: false,
            isLoad: false,
            isRefuse: false,
            isPageLoad: true,

        }
    },
    created() {
        this.pid = this.$route.params.pid;
        this.handleCheckMemeber();

    },
    mounted() {

    },
    watch: {
        user: function (val) {
            if (val.username) {

                this.username = val.username
            }
        }

    },
    methods: {
        handleCheckMemeber() {
            let reqData = {
                pid: this.pid,
            };
            checkMember(reqData).then((res) => {
                console.log(res);

                if (res.data.code == 1) {
                    this.$router.replace("/studio/" + this.pid);
                } else {
                    this.loadProjectInfo();
                    this.handleCheckApply()

                }
            }).catch((err) => {
                console.log(err);
            });
        },
        loadProjectInfo() {
            let reqdata = {
                pid: this.pid,
            };
            getProjectinfo(reqdata).then((res) => {
                if (res.data.data[0].length > 0) {
                    let memberlist = res.data.data[1];
                    let projectinfo = res.data.data[0][0];
                    projectinfo.memberlist = memberlist;
                    this.$store.commit("setprojectinfo", projectinfo);
                    this.projectinfo = projectinfo;
                    this.$route.meta.title = this.projectinfo.name; //列表的名称
                    document.title = this.$route.meta.title;
                    if (projectinfo.permission == 0) {
                        this.isForbidden = true;
                    };
                    if (projectinfo.permission >= 2) {

                    };

                    if (this.$platform.inMiniProgram()) {
                        wx.miniProgram.postMessage({
                            data: {
                                projectinfo: projectinfo,
                                stime: this.stime,
                                etime: this.etime,
                            },
                        });
                    }
                }else{
                    this.$router.replace('/404')
                }

            });

        },
        handleApplyPermission() {
            console.log('apply permission');
            console.log(this.username);
            if (this.username.length > 0 || this.reason.length > 0) {
                this.isLoad = true;
                applyPermission({
                    pid: this.pid,
                    username: this.username,
                    reason: this.reason
                }).then((res) => {
                    this.isLoad = false;
                    if (res.data.code == 1) {
                        socket.connect();
                        socket.emit("reload_apply");
                        this.isAlreadyApply = true;
                    }
                })

            }

        },
        handleCheckApply() {
            checkApply({
                pid: this.pid,
            }).then((res) => {
                this.isPageLoad = false;

                console.log(res.data.data);
                let data = res.data.data;
                if (data.length > 0) {
                    if (data[0].status == 1) {
                        this.isAlreadyApply = true;

                    } else if (data[0].status == 2) {
                        this.$router.replace('/studio/' + this.pid)
                    } else if (data[0].status == 3)(
                        this.isRefuse = true
                    )

                };

            })

        },
        handleBackHome() {
            this.$router.replace('/')
        }

    }
}
</script>
